<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red2{
            color:red;
        }
        .blue{
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="wrap">
    <!--当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。-->
    <!--v-bind:中可以是数组,对象,json,还支持三目运行符
    v-bind:class="[isActive ? activeClass : '', errorClass]"-->
    <!--<p :class="[red1,b]">{{msg}}</p>-->
    <!--<p :class="{red2:true,blue:false}">{{msg}}</p>-->
    <!--<p :class="{red2:'aa',blue:bb}">{{msg}}</p>-->
    <p :class="json">{{msg}}</p>
</div>

</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#wrap',
        data:{
            aa:'true',
            bb:'false',
            msg:'元素msg',
            url:'https://www.baidu.com/img/bd_logo1.png',
            red1:'red2',
            b:'blue',
            json:{
                red2:true,
                blue:true
            }
        },
    })
</script>
